<template>
<div>
    <ul class="list">
        <li v-for="item in alphabetlist" :key="item.id" @click="handleLetterClick">{{item.content}}</li>

    </ul>
    <div class="connect" ref='b'>{{this.content}}</div>
</div>
</template>

<script>
//	引入组件

//	定义输出组件name
export default {
    name: 'locationAlphabet',
    methods: {
        //   定义点击事件
        handleLetterClick(e) {

            // 定义content获取函数事件的默认形参中的文本内容
            this.content = e.target.innerText

            // 定义传出content
            this.$emit("change", this.content)

            //  console.log(this.content)
            for (let index = 0; index < this.alphabetlist.length; index++) {

                // 判断content等于alphabetlist[index].content的话执行下列代码
                if (this.content === this.alphabetlist[index].content) {

                    //    声明变量等于一个数值
                    let b = 30 + ((index + 1) * 19.5)

                    //    定义s获取b的元素节点 
                    const s = this.$refs.b

                    //    给S这个元素节点添加样式
                    s.style = "top:" + b + "px"

                    //    定义定时器函数
                    setTimeout(function () {
                        s.style = "display:none"
                    }, 1000)

                }

            }
        }
    },
    data() {
        return {
            content: '',

        }

    },
    //注册组件
    props: {
        alphabetlist: Array
    }

}
</script>

<style scoped>
.list {
    position: fixed;
    top: 40px;
    right: 0;
    padding-bottom: 500px;
    background-color: #ccc;
    text-align: center;
    color: rgb(5, 133, 133);
    opacity: 0.6;
}

.list li {
    margin: 6px 0px;
    font-weight: bold;
}

.connect {
    position: fixed;
    top: 50px;
    right: 50px;
    background-color: rgb(9, 168, 168);
    color: rgb(241, 238, 238);
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    font-size: 25px;

}
</style>
